<template>
	<s-layout title="当面付订单">
		<view>
				<view v-for="(item, index) in state.pagination.data" :key="index">
					<view class="order-item">
						<view class="line-box">
							<view>订单编号:</view>
							<view>{{ item.orderSn}}</view>
						</view>
						<view class="line-box">
							<view>下单时间:</view>
							<view>{{item.createTime}}</view>
						</view>
						<view class="line-box">
							<view>支付方式:</view>
							<view>{{ item.payType === '3' ? '通用卡余额' : item.payType === '2' ? '微信' : '-'}}</view>
						</view>
						<view class="line-box">
							<view>备注:</view>
							<view>{{ item.merchantNote || '-' }}</view>
						</view>
						<view class="line-box">
							<view>支付金额:</view>
							<view>￥{{item.totalAmount}}</view>
						</view>
					</view>
				</view>
			<s-empty
			  v-if="state.pagination.total === 0"
			  icon="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/09/2489e93becde3c4254a1d5cda65818f8fcorder-empty.png"
			  text="暂无订单"
			></s-empty>
		<!-- 加载更多 -->
		<uni-load-more
		  v-if="state.pagination.total > 0"
		  :status="state.loadStatus"
		  :content-text="{
		    contentdown: '上拉加载更多',
		  }"
		  @tap="loadmore"
		/>
		</view>
	</s-layout>

</template>

<script setup>
  import { computed, reactive } from 'vue';
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
  import { formatOrderColor, getOrderStatusName, getOrderAfterSaleStatusName } from '@/sheep/hooks/useGoods';
  import sheep from '@/sheep';
  import _, {clone} from 'lodash';

  const pagination = {
    data: [],
    page: 1,
    total: 0,
    size: 5
  };
  // 数据
  const state = reactive({
    currentTab: 0,
    pagination: {
      data: [],
      page: 1,
      total: 0,
      size: 5
    },
    loadStatus: '',
    deleteOrderId: 0,
    error: 0,
  });

  const tabMaps = [
    {
      name: '全部',
      value: '-1',
    },
    {
      name: '待付款',
      value: '0',
    },
    {
      name: '待发货',
      value: '1',
    },
    {
      name: '待收货',
      value: '2',
    },
    {
      name: '售后单',
      value: '-2',
    },
  ];

  // 切换选项卡
  function onTabsChange(e) {
    if (state.currentTab === e.index) return;

    state.pagination = clone(pagination);
    state.currentTab = e.index;
    state.pagination.data = []
    getOrderList();
  }

  // 订单详情
  function onOrderDetail(id) {
    sheep.$router.go('/pages/order/detail', {
      id,
    });
  }

  // 分享拼团
  function onOrderGroupon(order) {
    sheep.$router.go('/pages/activity/groupon/detail', {
      id: order.ext.groupon_id,
    });
  }

  // 查看发票
  function onOrderInvoice(invoiceId) {
    sheep.$router.go('/pages/order/invoice', {
      invoiceId,
    });
  }

  // 继续支付
  function onPay(data) {
    console.log('data',data)
    sheep.$router.go('/pages/pay/index', {
      orderSN:data.orderSn,
      totalAmount: data.totalAmount,
      orderType: 'memberConsumer'
    });
  }

  // 评价
  function onComment(orderSN) {
    sheep.$router.go('/pages/goods/comment/add', {
      orderSN,
    });
  }

  // 确认收货
  async function onConfirm(orderId) {
    uni.showModal({
      title: '提示',
      content: '请确认包裹全部到达后再确认收货',
      success: async function (res) {
        if (res.confirm) {
          const res = await sheep.$api.order.confirm(orderId);
          if (res) {
            sheep.$helper.toast('收货成功')
            state.pagination = clone(pagination)
            getOrderList()
          }
        }
      },
    });
  }

  // 查看物流
  async function onExpress(orderId) {
    return
    sheep.$router.go('/pages/order/express/list', {
      orderId,
    });
  }

  // 计算商品数量
  function calcGoodsCount(data){
    let sum = 0
    data.forEach(it => {
      sum += it.quantity
    })
    return sum
  }

  // 获取订单列表
  async function getOrderList() {
    state.loadStatus = 'loading';
    console.log('size:', state.pagination)
    let res = await sheep.$api.order.list({
      page: state.pagination.page - 1,
      size: state.pagination.size,
      status: 3,
	  orderType: '2'
    });
    const {content, totalElements, totalPages} = res;
	console.log('content',content)
    // content.forEach(it => {
    //   it.orderItemList.forEach(item => {
    //     let str = "";
    //     const obj = JSON.parse(item.spData);
    //     Object.keys(obj).forEach((key) => {
    //       str += key + "：" + obj[key] + " ";
    //     });
    //     item.spDataValue = str;
    //   })
    // })
    state.pagination.data = _.concat(state.pagination.data, content);
	console.log(_.concat(state.pagination.data, content))
    state.pagination.total = totalElements
    if (state.pagination.page < totalPages) {
      state.loadStatus = 'more';
    } else {
      state.loadStatus = 'noMore';
    }
  }

  onLoad(async (options) => {
    if (options.type) {
      state.currentTab = options.type;
    }
    getOrderList();
  });

  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      state.pagination.page++
      getOrderList();
    }
  }

  // 上拉加载更多
  onReachBottom(() => {
    loadmore();
  });

  //下拉刷新
  onPullDownRefresh(() => {
    state.pagination = clone(pagination);
    getOrderList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  function reloadData(){
    state.pagination = clone(pagination)
    getOrderList()
  }
</script>
<style lang="scss" scoped>
	::v-deep .select--uni-select {
		width: 240rpx;
	}

	.line-box {
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
	}

	.order-item {
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		width: 670rpx;
		padding: 20rpx;
		background-color: #fff;

	}

	.order-item:first-child {
		margin-top: 20rpx;
	}

	page {
		background-color: #efeef3;
	}

	.scroll-Y {
		height: calc(100vh - 820rpx);
		overflow: hidden;
	}

	.store-box {
		margin-top: 20rpx;

		.shopName {
			font-size: 35rpx;
			margin-bottom: 20rpx;
		}

		.store-item {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 20rpx;
		}
	}

	.body {
		position: relative;
		z-index: 99999;
		margin: -40rpx 30rpx 0 30rpx;
		padding: 0 15rpx;
		background-color: white;
		border-radius: 14rpx;
		padding-bottom: 20rpx;

		&__text {
			font-weight: bold;
			font-size: 30rpx;
			margin-top: 15rpx;
		}
	}

	.integral {
		display: flex;
		align-items: flex-end;
		padding: 20rpx;

		&__nav {
			// color: $u-main-color;
			font-weight: bold;
			margin-bottom: 20rpx;
			font-size: 30rpx;

			text {
				font-size: 38rpx;
			}
		}

		&__desc {
			font-size: 24rpx;
			// color: $u-type-info;
			margin-bottom: 10rpx;
		}
	}

	.grid-text {
		font-size: 38rpx;
		font-weight: bold;
	}

	.grid-desc {
		font-size: 24rpx;
		// color: $u-type-info;
		margin-bottom: 30rpx;
	}
</style>
